<template>
    <div class="SystemHome">
        <div class="img-bg"></div>
        <div class="img-bg1"></div>
        <div class="img-bg2"></div>
        <div class="header">
            <div class="btn-list btn-list-left">
                <div class="left-content">
                    <div class="dateTime" style="">
                        <span class="date">{{ year }}年{{ month }}月{{ day }}日</span>
                        <span>星期{{ week }}</span>
                        <span class="time">{{ time }}</span>
                    </div>
                </div>
            </div>
            <h1 class="title">{{ title }}</h1>
            <div class="btn-list btn-list-right">
                <span style="margin-top: 1.5rem">今日天气</span>
                <div class="weather">
                    <img class="imgWeather" src="../../assets/images/header/u22.png" alt="" />
                    <span style="margin-top: 8px">晴24°C</span>
                </div>
            </div>
        </div>
        <div class="content">
            <router-view></router-view>
            <div class="left">
                <div class="left-part-1 left-part">
                    <div class="left-part-title">
                        <div class="left-part-1-title part-title">基础库目录</div>
                        <div class="left-part-extra">
                            <span class="title-large">4</span>
                            <span class="title-small">大库</span>
                        </div>
                    </div>
                    <div class="left-part-1-content">
                        <div class="top-left">
                            <div class="left-part">
                                <div class="left-part-img1"></div>
                            </div>
                            <div class="right-part">
                                <div class="top-layer">监测数据</div>
                                <div class="middle-layer">14</div>
                                <div class="bottom-layer">类</div>
                            </div>
                        </div>
                        <div class="top-right">
                            <div class="left-part">
                                <div class="left-part-img1"></div>
                            </div>
                            <div class="right-part">
                                <div class="top-layer">成果数据</div>
                                <div class="middle-layer">23</div>
                                <div class="bottom-layer">类</div>
                            </div>
                        </div>
                        <div class="bottom-left">
                            <div class="left-part">
                                <div class="left-part-img1"></div>
                            </div>
                            <div class="right-part">
                                <div class="top-layer">空间数据</div>
                                <div class="middle-layer">24</div>
                                <div class="bottom-layer">类</div>
                            </div>
                        </div>
                        <div class="bottom-right">
                            <div class="left-part">
                                <div class="left-part-img1"></div>
                            </div>
                            <div class="right-part">
                                <div class="top-layer">业务数据</div>
                                <div class="middle-layer">54</div>
                                <div class="bottom-layer">类</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left-part-2 left-part">
                    <div class="left-part-title">
                        <div class="left-part-2-title part-title">标签目录</div>
                        <div class="left-part-extra">
                            <span class="title-large">19</span>
                            <span class="title-small">主题</span>
                        </div>
                    </div>
                    <div class="left-part-2-content">Right 2 Content◆</div>
                </div>
                <div class="left-part-3 left-part">
                    <div class="left-part-title">
                        <div class="left-part-3-title part-title">科室资源目录</div>
                        <div class="left-part-extra">
                            <span class="title-large">5</span>
                            <span class="title-small">科室</span>
                        </div>
                    </div>
                    <div class="left-part-3-content">
                        <kszyml></kszyml>
                    </div>
                </div>
                <div class="left-part-4 left-part">
                    <div class="left-part-title">
                        <div class="right-part-4-title part-title">区县资源目录</div>
                        <div class="left-part-extra">
                            <span class="title-large">107</span>
                            <span class="title-small">区县</span>
                        </div>
                    </div>
                    <div class="right-part-4-content">
                        <xqzyml></xqzyml>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="img-h1">数据目录<span>3448</span></div>
                <div class="img-h2">已共享资源目录<span>3151</span></div>
                <div class="img1"></div>
                <div class="center1">数据资源总条数</div>
                <span class="span1">20,198,410,142</span>
                <div class="img1"></div>
                <div class="center2">数据存储管理子系统</div>
                <span class="span2">3481条</span>
                <div class="center3">标准化处理子系统</div>
                <span class="span3">25181条</span>
                <div class="center4">实验设备运行评估管理子系统</div>
                <span class="span4">60992条</span>
                <div class="img2"></div>
                <div class="center5">数据传输子系统</div>
                <span class="span5">1548条</span>
                <div class="center6">数据管理子系统</div>
                <span class="span6">3481条</span>
                <div class="center7">实验装备保障管理子系统</div>
                <span class="span7">1117条</span>
                <div class="center8">实验监控管理子系统</div>
                <span class="span8">2395条</span>
                <div class="img3"></div>
                <div class="center9">观测实验运行管理子系统</div>
                <span class="span9">4大库</span>
                <div class="img4"></div>
                <div class="center10">树木年轮生态实验室业务子系统</div>
                <span class="span10">5个科室</span>
                <div class="img5"></div>
                <div class="center11">数据应用服务管理子系统</div>
                <span class="span11">24主题</span>
                <div class="img6"></div>
                <div class="center12">试验基地运行管理子系统</div>
                <span class="span12">107个区县</span>
                <div class="img7"></div>
            </div>
            <div class="right">
                <div class="right-part-1">
                    <div>
                        <div class="right-part-1-title part-title">资源汇聚情况</div>

                        <div class="right-part-1-content">Right 2 Content</div>
                    </div>
                </div>
                <div class="right-part-2">
                    <div>
                        <div class="right-part-2-title part-title">资源汇聚方式</div>
                        <div class="right-part-2-content">
                            <zyhjfs></zyhjfs>
                        </div>
                    </div>
                </div>
                <div class="right-part-3">
                    <div class="right-part-3-title part-title">资源汇聚类型</div>
                    <div class="right-part-3-content">
                        <zyhjlx></zyhjlx>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import zyhjfs from './zyhjfs.vue';
import zyhjlx from './zyhjlx.vue';
import kszyml from './kszyml.vue';
import xqzyml from './xqzyml.vue';

export default {
    name: 'SystemHome',
    components: {
        zyhjfs,
        zyhjlx,
        kszyml,
        xqzyml
    },
    data() {
        return {
            time: dayjs().format('HH:mm:ss'),
            date: dayjs().format('YYYY-MM-DD'),
            year: '',
            month: '',
            day: '',
            title: '专业气象灾害数据管理系统',
            topMenuActive: 0,
            routesDict: {
                0: '/home',
                1: '/collectInfo',
                2: '/sampleInfo',
                3: '/sampleProcess',
                4: '/treeRing',
                5: '/systemHome',
            },
            popup: null,
            map: null,
            vectorLayer: null,
            vectorSource: null,
        };
    },
    computed: {
        week() {
            const days = dayjs().day();
            const week = ['日', '一', '二', '三', '四', '五', '六'];
            return week[days];
        },
    },
    methods: {
        toPath(path) {
            this.$router.push(path);
            this.topMenuActive = path;
        },

        getTime() {
            this.year = dayjs().format('YYYY');
            this.month = dayjs().format('MM');
            this.day = dayjs().format('DD');
        },
    },

    mounted() {
        setInterval(() => {
            this.time = dayjs().format('HH:mm:ss');
        }, 1000);

        this.getTime();
    },
};
</script>

<style lang="scss" scoped>
// 顶部图片按钮的公共样式
@mixin topBtnImgStyle() {
    width: 18.6rem;
    height: 5rem;
    font-size: 1.4rem;
    line-height: 4rem;
    margin: 0 1.5rem;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.SystemHome {
    height: 100vh;
    width: 100vw;
    background: url('../../assets/images/header/u0_state0.jpg') no-repeat center center;
    background-size: cover;

    .header {
        height: 10%;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        color: white;
        background: url('../../assets/images/header/u2367.png') no-repeat center center;
        background-size: cover;
        position: relative;
        padding-top: 20px;

        .btn-list {
            display: flex;
            top: 50%;
            transform: translate(0, -40%);
            position: absolute;
        }

        .btn-list-left {
            left: 1%;
            top: 40%;
            display: flex;
            align-items: center;

            .left-content {
                display: flex;
                align-items: center;
            }
        }

        .btn-list-right {
            right: 4%;
            top: 40%;
            .weather {
                display: flex; /* 使用 Flexbox 布局 */
                align-items: center; /* 垂直居中对齐 */
                margin-top: 1rem;
                .imgWeather {
                    vertical-align: middle;
                    margin: 0 1rem;
                }
            }
        }

        .btn {
            @include topBtnImgStyle;
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
            font-weight: 700;
            color: #ffffff;
            // background-image: url("~@/assets/images/btn-normal.png");
            -webkit-filter: brightness(120%);
            filter: brightness(120%);
            width: 10rem;
            height: 2.4rem;
            font-size: 14px;
            line-height: 3.4rem;
            padding-left: 5px;
            margin: 0 1.5rem 0 3rem;
            // border: 1px #fff solid;
            border-radius: 6px;
            // background-color: rgb(1, 57, 90);
            background-image: url('../../assets/images/header/btn-left.png');

            .btn-active {
                cursor: pointer;
                @include topBtnImgStyle;
                color: #ffffff;
                font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
                font-weight: 700;
                // background-image: url("~@/assets/images/btn-active.png");
                -webkit-filter: brightness(120%);
                filter: brightness(120%);
                // background-color: rgba(17, 101, 148, 1);
                background-image: url('../../assets/images/header/btn-left-a.png');
                width: 10rem;
                height: 3.4rem;
                font-size: 14px;
                line-height: 3.4rem;
                margin: 0 1.5rem;
                // border: 1px #fff solid;
                // border-radius: 6px;
            }
        }

        .title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            line-height: 1.2;
            margin: 0;
        }
    }

    .btn-list-right.btn {
        @include topBtnImgStyle;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        color: #ffffff;
        // background-image: url("~@/assets/images/btn-normal.png");
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
        width: 10rem;
        height: 3.4rem;
        font-size: 14px;
        line-height: 3.4rem;
        margin: 0 1.5rem 0 3rem;
        // border: 1px #fff solid;
        border-radius: 6px;
        // background-color: rgb(1, 57, 90);
        background-image: url('../../assets/images/header/btn-right.png');
    }

    .btn-list-right.btn-active {
        cursor: pointer;
        @include topBtnImgStyle;
        color: #ffffff;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        // background-image: url("~@/assets/images/btn-active.png");
        -webkit-filter: brightness(110%);
        filter: brightness(110%);
        // background-color: rgba(17, 101, 148, 1);
        background-image: url('../../assets/images/header/btn-right-a.png');
        width: 10rem;
        height: 3.4rem;
        font-size: 14px;
        line-height: 3.4rem;
        margin: 0 1.5rem;
        // border: 1px #fff solid;
        // border-radius: 6px;
    }

    .dateTime {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin-top: 1.5rem;
        margin-left: -1rem;
        span {
            margin-left: 0.5rem;
        }

        .time {
            font-size: 24px;
            margin-bottom: 5px;
            margin-top: -0.25rem;
        }
    }
}

.content {
    display: flex; /* 启用 Flexbox 布局 */
    width: 100%; /* 容器宽度为100% */
    height: 90%;

    .left {
        // background-color: #f44336; /* 左边背景颜色 */
        width: 20%; /* 左边宽度为15% */
        height: 98%;
        z-index: 1;
    }
    .center {
        // background-image: url('../../assets/images/systemhome/u395_state0.jpg');
        width: 60%; /* 中间宽度为70% */
        height: 97%;
        position: relative;
    }
    .center1{
        position: absolute;
        top: 10.7vw;
        left: 26vw;
        font-size: 1.5vw;
        font-weight: bold;
        z-index: 1;
    }
    .span1{
        position: absolute;
        top: 7.9vw;
        left: 23vw;
        font-size: 2.2vw;
        color: #ffe9c4;
        font-weight: bold;
        z-index: 1;
    }
    .center2{
        position: absolute;
        top: 4.7vw;
        left: 6vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span2{
        position: absolute;
        top: 6.2vw;
        left: 7.5vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center3{
        position: absolute;
        top:10.35vw;
        left: 3vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span3{
        position: absolute;
        top: 11.85vw;
        left: 3.5vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center4{
        position: absolute;
        top: 15.55vw;
        left: 3vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span4{
        position: absolute;
        top: 17.05vw;
        left: 5.5vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center5{
        position: absolute;
        top: 1.85vw;
        left: 47vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span5{
        position: absolute;
        top: 2.95vw;
        left: 47.5vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center6{
        position: absolute;
        top: 7vw;
        left: 50.5vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span6{
        position: absolute;
        top: 8vw;
        left: 51vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center7{
        position: absolute;
        top: 9.4vw;
        left: 45.4vw;
        color: #c6e1f1;
        width: 6vw;
        z-index: 1;
        display: flex;
        justify-content: center;
        font-weight: bold;
    }
    .span7{
        position: absolute;
        top: 11.4vw;
        left: 45.9vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center8{
        position: absolute;
        top: 15.5vw;
        left: 50vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
    }
    .span8{
        position: absolute;
        top: 16.6vw;
        left: 51.3vw;
        color: #c6e1f1;
        z-index: 1;
        font-weight: bold;
        font-size: 1.3vw;
    }
    .center9{
        position: absolute;
        top: 69vh;
        left: 8.7vw;
        width: 7vw;
        z-index: 1;
        display: flex;
        justify-content: center;
        font-weight: bold;
    }
    .span9{
        position: absolute;
        top: 60vh;
        left: 10vw;
        color: #73fbac;
        z-index: 1;
        font-weight: bold;
        font-size: 1.35vw;
    }
    .center10{
        position: absolute;
        top: 74vh;
        left: 20.7vw;
        width: 7vw;
        z-index: 1;
        display: flex;
        justify-content: center;
        font-weight: bold;
    }
    .span10{
        position: absolute;
        top: 65vh;
        left: 21.7vw;
        color: #73fbac;
        z-index: 1;
        font-weight: bold;
        font-size: 1.35vw;
    }
    .center11{
        position: absolute;
        top: 74vh;
        left: 32.7vw;
        width: 7vw;
        z-index: 1;
        display: flex;
        align-items:center;
        justify-content: center;
        font-weight: bold;
    }
    .span11{
        position: absolute;
        top: 65vh;
        left: 33.7vw;
        color: #73fbac;
        z-index: 1;
        font-weight: bold;
        font-size: 1.35vw;
    }
    .center12{
        position: absolute;
        top: 69vh;
        left: 44.7vw;
        width: 7vw;
        z-index: 1;
        display: flex;
        align-items:center;
        justify-content: center;
        font-weight: bold;
    }
    .span12{
        position: absolute;
        top: 60vh;
        left: 45vw;
        color: #73fbac;
        z-index: 1;
        font-weight: bold;
        font-size: 1.35vw;
    }
    .img1{
        position: absolute;
        top:24vh;
        left: 20vw;
        width: 22vw;
        height: 23.5vw;
        background-image: url('../../assets/images/home/u2949.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img2{
        position: absolute;
        top: 8vh;
        left: 44vw;
        width: 13vw;
        height: 35.3vw;
        background-image: url('../../assets/images/home/u2955.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img3{
        position: absolute;
        top: 8vh;
        left: 2vw;
        width: 13vw;
        height: 35.3vw;
        background-image: url('../../assets/images/home/u2954.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img4{
        position: absolute;
        top: 62vh;
        left: 7vw;
        width: 10vw;
        height: 10.85vw;
        background-image: url('../../assets/images/home/u2950.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img5{
        position: absolute;
        top: 67vh;
        left: 19vw;
        width: 10vw;
        height: 10.85vw;
        background-image: url('../../assets/images/home/u2950.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img6{
        position: absolute;
        top:67vh;
        left: 31vw;
        width: 10vw;
        height: 10.85vw;
        background-image: url('../../assets/images/home/u2950.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .img7{
        position: absolute;
        top: 62vh;
        left: 43vw;
        width: 10vw;
        height: 10.85vw;
        background-image: url('../../assets/images/home/u2950.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .right {
        // background-color: #2196f3; /* 右边背景颜色 */
        width: 20%; /* 右边宽度为15% */
        height: 98%;
        z-index: 1;
    }
}

.left,
.center,
.right {
    height: 100%; /* 可以根据需要设置高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* 文字颜色设置为白色 */
}
.left,
.right {
    display: flex;
    flex-direction: column; /* 子项目垂直排列 */
}
.left > div,
.right > div {
    width: 100%;
    // border: 1px solid red;
}
/* 左边的四块 */
.left-part-1 {
    height: 25%;
    .left-part-1-content {
        display: grid; /* 启用 Grid 布局 */
        grid-template-rows: 50% 50%; /* 两行，各占 50% */
        grid-template-columns: 50% 50%; /* 两列，各占 50% */
        height: 80%; /* 根据需要设置容器高度 */
        width: 100%; /* 根据需要设置容器宽度 */

        .top-left, .top-right, .bottom-left, .bottom-right {
            grid-row: 1;
            grid-column: 1;

            display: flex; /* 使用 Flexbox 布局 */

            .right-part {
                display: grid; /* 使用 Grid 布局 */
                grid-template-rows: 1fr 1fr 1fr; /* 三行，各占 1 份 */
                height: 100%; /* 根据需要设置高度 */
            }
            .left-part {
                background-image: url('../../assets/images/systemhome/u430.png');
                background-repeat: no-repeat; /* 确保背景图像不重复 */
                background-position: center; /* 背景图像居中对齐 */
                // background-size: contain; /* 背景图像适应 div 大小，保持宽高比 */
                width:80%;
                height:80%;
                padding: 0.5rem;
            }
            .left-part-img1 {
                padding-left: 3.5rem;
                padding-top: 0.7rem;
                width: 2rem;
                height: 2rem;
                background-image: url('../../assets/images/systemhome/u436.png');
                background-repeat: no-repeat; /* 确保背景图像不重复 */
                background-position: center; /* 背景图像居中对齐 */
            }
            .left-part,
            .right-part {
                flex: 1; /* 占据剩余空间 */
                /* 根据需要添加其他样式 */
            }
            .top-layer{
                font-size:0.7rem;
                margin-top:0.1rem;
            }
            .middle-layer{
                font-size:1.5rem;
                color:orange;
                font-weight:bold;
            }
          
            .bottom-layer {
                font-size:0.8rem;
                color:rgb(0, 168, 255);
            }
        }

        .top-right {
            grid-row: 1;
            grid-column: 2;
            /* 根据需要添加其他样式 */
        }

        .bottom-left {
            grid-row: 2;
            grid-column: 1;
            /* 根据需要添加其他样式 */
        }

        .bottom-right {
            grid-row: 2;
            grid-column: 2;
            /* 根据需要添加其他样式 */
        }
    }
}
.left-part-2 {
    height: 29%;
}
.left-part-3 {
    height: 23%;
}
.left-part-4 {
    height: 23%;
}

/* 右边的三块 */
.right-part-1 {
    height: 40%;
}
.right-part-2 {
    height: 30%;
}
.right-part-3 {
    height: 30%;
}
.part-title {
    color: white;
    border-left: 1px solid orange;
    border-right: 1px solid orange;
    width: 6.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.left-part-title {
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: row;
    justify-content: space-between;
    .left-part-extra {
        // display: inline-block; /* 使元素在同一行显示 */
        margin-right: 1rem;
        color: rgb(0, 168, 255);
        width: 18.5rem;
        text-align: right;
        border-bottom: 0.15rem solid rgba(0, 168, 255, 0.3);
        .title-large {
            font-size: 1rem;
            margin-right: 0.5rem;
        }
        .title-small{
            font-size:0.8rem;
        }
    }
}
.right-part-2-content{
    height: 24vh;
}
.right-part-3-content
{
    height: 24vh;
}
.left-part-3-content{
    height: 17vh;
}
.right-part-4-content{
    height: 17vh;
}
.left-part-2-content{
    height: 23vh;

}
.img-bg{
    position: absolute;
    top: 0vh;
    left: 19vw;
    width: 62vw;
    height: 48vw;
    background-image: url('../../assets/images/systemhome/u2753_state0.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.img-bg1{
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 20vw;
    height: 100vh;
    z-index: 0;
    background-color: rgba(0, 20, 50,0.6);
}
.img-bg2{
    position: absolute;
    top: 0vh;
    right: 0vw;
    width: 20vw;
    height: 100vh;
    z-index: 0;
    background: #000;
    background-color: rgba(0, 20, 50,0.6);
}
.img-h1{
    position: absolute;
    top:-5vh;
    left: 0vw;
    width: 21vw;
    height: 4vw;
    background-image: url('../../assets/images/systemhome/u399.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    font-weight: bold;
    font-size: 0.9vw;
    box-sizing: border-box;
    padding-left: 5vw;
    padding-top: 0.8vw;
    font-style: italic;
}
.img-h1 span{
    font-size: 1.5vw;
    color: #eec5a6;
    padding-left: 1vw;
}
.img-h2 span{
    font-size: 1.5vw;
    color: #eec5a6;
    padding-left: 1vw;
}
.img-h2{
    position: absolute;
    top:-5vh;
    left: 39vw;
    width: 21vw;
    height: 4vw;
    background-image: url('../../assets/images/systemhome/u398.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    font-weight: bold;
    font-size: 0.9vw;
    box-sizing: border-box;
    padding-left: 5vw;
    padding-top: 0.8vw;
    font-style: italic;
}
</style>
